<template>
	<div class="footbar">
		<yd-tabbar>
				<yd-tabbar-item :active="active1" title="首页" link="/home">
						<yd-icon name="home" slot="icon" size="1.54rem"></yd-icon>
				</yd-tabbar-item>
				<yd-tabbar-item :active="active2" title="购物车" link="/shopcar">
						<yd-icon name="shopcart-outline" slot="icon" size="1.54rem"></yd-icon>
				</yd-tabbar-item>
				<yd-tabbar-item :active="active3" title="个人中心" link="/mine">
						<yd-icon name="ucenter-outline" slot="icon" size="1.54rem"></yd-icon>
				</yd-tabbar-item>
		</yd-tabbar>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				active1:false,
				active2:false,
				active3:false,
			}
		},
		watch:{
			$route:{
				handler(val,oldval){
					if(val.name=="Home"){
						this.active1=true;
						this.active2=false;
						this.active3=false;
					}else if(val.name=="Shopcar"){
						this.active1=false;
						this.active2=true;
						this.active3=false;
					}else if(val.name=="Mine"){
						this.active1=false;
						this.active2=false;
						this.active3=true;
					}
				},
				// 深度观察监听
				deep: true
			}
		}
	}
</script>

<style lang="less" scoped>
	.yd-tabbar{
		position: relative;
		z-index: 1000;
		position: fixed;
		bottom: 0;
	}
</style>
